<template>
	<div style="width:100%;height:74vh;position:relative;">
		<div v-if="reportlist.length==0">
			<div class="emptyBoxset">
				<img src="../../../assets/image/empty6.png" style="width:150px;" />
				<span>抱歉，当前栏目下没有内容！</span>
			</div>
		</div>
		<div class="tablebox" v-else>
			<h3 class="reportTitle">
				上报进度
				<JsonExcel
					class="export-excel-wrapper"
					:data="reportlist"
					:fields="json_fields"
					:header="title"
					:name="title+'.xls'"
				  >
				<el-button class="exprtBtn" type="primary" plain>导出</el-button>
			  </JsonExcel>
			</h3>
			<table width="100%" cellspacing="0" cellpadding="0">
				<tr>
					<th rowspan="2"></th>
					<th rowspan="2">学校编号</th>
					<th rowspan="2">学校名称</th>
					<th colspan="2">上报情况</th>
					<th rowspan="2">文科/历史一本线</th>
					<th rowspan="2">文科/历史二本线</th>
					<th rowspan="2">理科/物理一本线</th>
					<th rowspan="2">理科/物理二本线</th>
				</tr>
				<tr>
					<th>学生上报</th>
					<th>教师上报</th>
				</tr>
				<tr v-for="(item,index) in reportlist">
					<td width='50'>{{index+1}}</td>
					<td>{{item.formatnum?item.formatnum:'--'}}</td>
					<td>{{item.schoolname?item.schoolname:'--'}}</td>
					<td>{{item.studentnum?item.studentnum:'--'}}</td>
					<td>{{item.teachernum?item.teachernum:'--'}}</td>
					<td>{{item.wknum1?item.wknum1:'--'}}</td>
					<td>{{item.wknum2?item.wknum2:'--'}}</td>
					<td>{{item.lknum1?item.lknum1:'--'}}</td>
					<td>{{item.lknum2?item.lknum2:'--'}}</td>
				</tr>
			</table>
		</div>
	</div>
</template>

<script>
	import navTop from "../../../components/head.vue"
	import {reportProgressapi} from '../../../api/api.js'
	import JsonExcel from 'vue-json-excel'
	export default{
		data(){
			return{
				screenWidth:'',
				reportlist:[],
				title:'',
				json_fields:{
					'学校编号': '--',
					'学校名称': 'schoolname',
					'学生上报': 'studentnum',
					'教师上报':'teachernum',
					'文科/历史一本线':'wknum1',
					'文科/历史二本线':'wknum2',
					'理科/物理一本线':'lknum1',
					'理科/物理二本线':'lknum2'
				}
				
			}
		},
		mounted() {
			this.screenWidth = document.body.clientWidth
			this.title= this.$route.query.title
			this.answerprogressjkclick(this.$route.query.navid)
		},
		methods:{
			answerprogressjkclick(id){
				let params = {
					navId:id
				}
				reportProgressapi(params).then(res=>{
					this.reportlist = res
				})
			}
		},
		components:{navTop,JsonExcel}
	}
</script>

<style scoped>
	.tablebox{
		box-sizing: border-box;
		background:#fff;
		margin:15px auto;
		padding:20px;
		min-height:74vh;
	}
	.tablebox table{
		border-top:solid 1px #C5D5F4;
		border-left:solid 1px #C5D5F4;
	}
	.tablebox table tr td,.tablebox table tr th{
		border-bottom:solid 1px #C5D5F4;
		border-right:solid 1px #C5D5F4;
		text-align: center;
		line-height:48px;
	}
	.tablebox table tr th{
		background:#EAF1FF 100%;
		font-size:16px;
		color:#333;
		font-weight:normal;
	}
	.reportTitle{
		font-size:16px;
		font-weight: normal;
		padding-bottom:20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.emptyBoxset{
		text-align: center;
		position:absolute;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
	}
	.emptyBoxset span{
		display: block;
		font-size:14px;
		padding-top:20px;
	}
	.emptyBoxset img{
		width:200px;
		height:auto;
	}
</style>